import React from "react";
import BaseScreen from "../BaseScreen";
import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/attendanceModel";
import { connect } from "react-redux";
import styles from "../../css/attendance.module.css";
import { locationTo,back } from "../../utils/LocationUtil";
import * as locations from '../../const/locations'
import { MyButton } from "../../view/MyButton";
import Config from "../../Config";
import DateTimePanel from "../components/Picker/DateTimePanel"
import Textarea from '../components/TextArea'
import UploadImgs from '../components/UploadImgs'
import {submitDaily} from '../../service/AttendService'
import { getTOKEN } from "../../utils/StorageUtil";
import { HintDialog } from '../../view/Dialog';
import{filterImgs} from '../../utils/CommomUtil'

class RecardScreen extends BaseScreen {
  constructor(props) {
    super(props)
    this.state = {
      finish:'',
      unfinish:'',
      need_coordinate:'',
      other_content:'',
      loading: false 
    }
  }
  componentDidMount() {
    document.title = '写日报'
  }

  getCompleted=(e)=>{
    this.setState({
      finish:e
    })
  }
  getUncompleted=(e)=>{
    this.setState({
      unfinish:e
    })
  }
  getCoordinate=(e)=>{
    this.setState({
      need_coordinate:e
    })
  }
  getReason = (e) => {
    this.setState({
      other_content:e
    })
  }   
  confirm = () => {
    const { imgs } = this.refs
    const { imgList } = imgs.state
    const params=this.state
    if(params.finish===''){
      this.showMsgDialog("今日完成工作不能为空");
    }else{
    this.setState({ loading: true });
      
      submitDaily({
        token:getTOKEN(),
        pic: filterImgs(imgList),
        ...params
      })
        .then(
          res =>{
    this.setState({ loading: false });
            
            if(res.error_code===0){
              this.refs.summit.setState({
                content: '提交成功',
                visibility: true
              });
  
            }
            if(res.error_code===308){
              this.refs.summit.setState({
                content: '您已经提交过了',
                visibility: true
              });
  
            }
          }
        )
        .catch(
          err => {
            console.log(err)
          }
        )
    }
  
  }
  render() {
    const { visibility,loading } = this.state
    return (
      <div className={styles["homes"]}>
        <div className={styles["attend_container"]}>
          <AddDailyItem name='今日完成工作' change={this.getCompleted} />
          <AddDailyItem name='今日未完成工作' change={this.getUncompleted} />
          <AddDailyItem name='需协调工作' change={this.getCoordinate} />
        </div>

        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>

            <div className={styles["stat_item_borderBottom"]}>
              <div className={styles["stat_item_key"]}>
                {/* <span style={{ color: 'red' }}>*</span> */}
                  备注
            </div>
            </div>
          </div>
          <div className={styles["attend_item_w"]} style={{ minHeight: '80px' }} >
            <Textarea
              onChange={this.getReason}
              placeholder=''
            />
          </div>
        </div>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_borderBottom"]}>
              <div className={styles["stat_item_key"]}>
                图片
            </div>
            </div>
          </div>
          <div className={styles["attend_item_w"]}>
            <UploadImgs ref='imgs' />
          </div>
        </div>
        <div className={styles['btn_wrapper']} style={{ padding: '120px 0 0' }}>
          <MyButton
            style={{
              width: '80%',
              borderRadius: '0.3rem'
            }}
            name={"确认提交"}
            onClick={() => {
              this.confirm();
            }}
          />
        </div>
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
        />
        <HintDialog
          ref="summit"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={() => { back() }}
        />
          <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM}/>
        
      </div>
    )
  }
}

const AddDailyItem = ({ name, change }) => {
  return (
    <div className={styles["stat_item_w"]} style={{ minHeight: '50px', height: 'auto' }}>
      <div className={styles["stat_item_borderBottom"]} style={{alignItems:'flex-start'}}>
        <div className={styles["stat_item_key"]} >
          <div style={{
            height: '50px',
            display: 'flex',
            alignItems: 'center',
            width: '120px'
          }}
          >
            {name}
          </div>
        </div>
        <div className={styles["stat_item_value"]}
          style={{
              padding:'15px 0',
              flex: 1,
          }}
        >
          <Textarea
            onChange={change}
            placeholder='请输入'
          />
        </div>
      </div>
    </div>
  )
}



export default RecardScreen